html {
    --icon-button-color-active: var(--google-grey-700);
    --icon-button-color       : var(--google-grey-600);
    --icon-size               : 48px;
    --tile-background-color   : rgb(229, 231, 232);
    --tile-hover-color        : rgba(var(--google-grey-900-rgb), .1);
    --title-height            : 32px;
    --icon-button-color-active: var(--google-grey-700);
    --icon-button-color       : var(--google-grey-600);
    --icon-size               : 48px;
    --tile-background-color   : rgb(229, 231, 232);
    --tile-hover-color        : rgba(var(--google-grey-900-rgb), .1);
    --tile-size               : 130px;
    --title-height            : 32px;
    --column-count            : 5;
    --content-width           : calc(var(--column-count) * var(--tile-size) + 1px);
}

#container {
    --tile-background-color: rgba(241, 243, 244, 1.00);
    --column-count         : 5;
    --row-count            : 2;
    --content-width        : calc(var(--column-count) * var(--tile-size) + 1px);
    display                : flex;
    flex-wrap              : wrap;
    height                 : calc(var(--row-count) * var(--tile-size));
    justify-content        : center;
    margin-bottom          : 8px;
    overflow               : hidden;
    padding                : 2px;
    transition             : opacity .3s ease-in-out;
    width                  : calc(var(--content-width) + 12px);
}

.tile {
    -webkit-tap-highlight-color: transparent;
    align-items                : center;
    border-radius              : 4px;
    box-sizing                 : border-box;
    cursor                     : pointer;
    display                    : flex;
    flex-direction             : column;
    height                     : var(--tile-size);
    opacity                    : 1;
    outline                    : 0;
    position                   : relative;
    text-decoration            : none;
    transition-duration        : .3s;
    transition-property        : left, top;
    transition-timing-function : ease-in-out;
    user-select                : none;
    width                      : var(--tile-size);
}

.tile-icon {
    align-items     : center;
    background-color: var(--tile-background-color);
    border-radius   : 50%;
    display         : flex;
    flex-shrink     : 0;
    height          : var(--icon-size);
    justify-content : center;
    margin-top      : 16px;
    width           : var(--icon-size);
}

.tile-icon img {
    height: 24px;
    width : 24px;
}

.query-tile-icon {
    -webkit-mask-image: url(chrome://resources/images/icon_search.svg);
    background-color  : var(--google-grey-700);
}

.tile-title {
    text-align   : center;
    font-weight  : 400;
    overflow     : hidden;
    text-align   : center;
    text-overflow: ellipsis;
    text-shadow  : var(--most-visited-text-shadow);
    white-space  : nowrap;
    width        : 100%;
}


#addShortcut {
    background-color: transparent;
    border          : none;
    box-shadow      : none;
    justify-content : unset;
    padding         : 0;
    width           : 130px;
    height          : 130px;
}

#addShortcut .tile-icon {
    align-items     : center;
    background-color: var(--tile-background-color);
    border-radius   : 50%;
    display         : flex;
    flex-shrink     : 0;
    height          : var(--icon-size);
    justify-content : center;
    margin-top      : 16px;
    width           : var(--icon-size);
    margin          : 0 auto;
    margin-top      : 16px;
}

#addShortcut .tile-icon #addShortcutIcon {
    background-image   : url(https://zhanstatic.vivo.com.cn/wukong-zhan/img/be597c3b-6a38-419f-b9d1-5d074077522dnwebp_compress.png);
    background-color   : var(--google-grey-900);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size  : 100%;
    height             : 24px;
    width              : 24px;
}

#addShortcut .tile-title {
    align-items  : center;
    border-radius: calc(var(--title-height)/ 2 + 2px);
    color        : var(--most-visited-text-color);
    display      : flex;
    line-height  : calc(var(--title-height)/ 2);
    margin       : 0 auto;
    margin-top   : 2px;
    padding      : 2px 8px;
    width        : 88px;
}

#addShortcut .tile-title span {
    font-weight  : 400;
    overflow     : hidden;
    text-align   : center;
    text-overflow: ellipsis;
    text-shadow  : none;
    white-space  : nowrap;
    width        : 100%;
}



/* 弹窗 */
.dialog-container {
    background-color: rgba(0, 0, 0, .6);
    bottom          : 0;
    left            : 0;
    position        : fixed;
    right           : 0;
    top             : 0;
    display: flex;
    align-items: center;
}

.dialog {
    width: 512px;
    height: 271px;
    margin: 0 auto;
    background-color: white;
    border-radius: 10px;
}

.dialog-title {
    /* color: var(--cr-primary-text-color); */
    flex                : 1;
    /* font-family      : var(--cr-dialog-font-family,inherit); */
    font-size           : var(--cr-dialog-title-font-size, calc(15 / 13 * 100%));
    line-height         : 1;
    padding-bottom      : var(--cr-dialog-title-slot-padding-bottom, 16px);
    padding-inline-end  : var(--cr-dialog-title-slot-padding-end, 20px);
    padding-inline-start: var(--cr-dialog-title-slot-padding-start, 20px);
    padding-top         : var(--cr-dialog-title-slot-padding-top, 20px);
}

.dialog-body {
    color  : var(--cr-secondary-text-color);
    padding: 0 var(--cr-dialog-body-padding-horizontal, 20px);
}

.cr-form-field-label {
    color         : rgb(95, 99, 104);
    display       : block;
    /* font-size  : var(--cr-form-field-label-font-size); */
    font-weight   : 500;
    letter-spacing: .4px;
    line-height   : 1;
    margin-bottom : 8px;
}

.inner-input-container {
    align-items    : center;
    display        : flex;
    justify-content: space-between;
    position       : relative;
}

.inner-input-container .input {
    border-bottom       : var(--cr-input-border-bottom, none);
    letter-spacing      : var(--cr-input-letter-spacing);
    -webkit-appearance  : none;
    background-color    : transparent;
    border              : none;
    box-sizing          : border-box;
    caret-color         : rgb(26,115,232);
    color               : rgb(32,33,36);
    font-family         : inherit;
    font-size           : inherit;
    font-weight         : inherit;
    line-height         : inherit;
    min-height          : var(--cr-input-min-height, auto);
    outline             : 0;
    padding-bottom      : var(--cr-input-padding-bottom, 6px);
    padding-inline-end  : var(--cr-input-padding-end, 8px);
    padding-inline-start: var(--cr-input-padding-start, 8px);
    padding-top         : var(--cr-input-padding-top, 6px);
    text-align          : inherit;
    text-overflow       : ellipsis;
    width               : 100%;
    border-bottom: 1px solid rgb(26,15,232);
    margin-bottom: 10px;
}

.button-container {
    display: flex;
    justify-content: flex-end;
    padding-bottom: var(--cr-dialog-button-container-padding-bottom,16px);
    padding-inline-end: var(--cr-dialog-button-container-padding-horizontal,16px);
    padding-inline-start: var(--cr-dialog-button-container-padding-horizontal,16px);
    padding-top: 24px;
}

.cancel-button {
    line-height: 154%;
    margin-inline-end: 8px;
    --paper-ripple-opacity: .1;
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    border: 1px solid rgb(218,220,224);
    border-radius: 4px;
    box-sizing: border-box;
    color: rgb(26, 15, 232);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-weight: 500;
    height: 32px;
    justify-content: center;
    min-width: 5.14em;
    outline-width: 0;
    overflow: hidden;
    padding: 8px 16px;
    position: relative;
    user-select: none;
}

.action-button {
    cursor: pointer;
    background-color: rgb(241, 243, 244);
    border-color: transparent;
    line-height: 154%;
    color: rgb(128, 134, 119);
    border: none;
    padding: 8px 16px;
}
